@import "~scss/_mixins";

.widget.widgetSpace { padding: 8px; z-index: 1; }
.widget.widgetSpace * { -webkit-app-region: no-drag; }

.widget.widgetSpace {
	.buttons {
		.item { 
			padding: 3px 8px; display: flex; align-items: center; justify-content: space-between; position: relative; background: var(--color-bg-primary); 
			border-radius: 6px;
		}
		.item::before {
			content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: var(--color-shape-highlight-medium); z-index: 1; pointer-events: none;
			border-radius: inherit; opacity: 0;
		}
		.item:hover::before, .item.hover::before { opacity: 1; }

		.item {
			.side { display: flex; flex-direction: row; align-items: center; }
			.side.left { gap: 0px 6px; }
			.side.right {
				.cnt { 
					@include text-very-small; background-color: var(--color-control-active); color: var(--color-control-bg); border-radius: 50%; min-width: 18px; 
					text-align: center; font-weight: 500; height: 18px; line-height: 18px; display: none; padding: 0px 2px; flex-shrink: 0;
				}
			}

			.name { display: flex; gap: 0px 8px; @include text-overflow-nw; }

			.icon { width: 20px; height: 20px; flex-shrink: 0; }
			.icon.member { background-image: url('~img/icon/widget/button/member.svg'); }
			.icon.all { background-image: url('~img/icon/widget/button/all.svg'); }
			.icon.chat { background-image: url('~img/icon/widget/button/chat.svg'); }
			.icon.search { background-image: url('~img/icon/widget/button/search.svg'); }
			.icon.settings { background-image: url('~img/icon/widget/button/settings.svg'); }
		}
		.item:hover {
			.side.right {
				.icon.more { opacity: 1; }
			}
		}
	}

	&.withCnt {
		.buttons {
			.side.left { width: calc(100% - 30px); }
			.side.right {
				.cnt { display: block; }
			}
		}
	}
}
